<template>
    <div class="login">
        <div class="_login">
            <div class="header">{{ isforget ? "保密问题" : "登录" }}</div>
            <el-form v-if="!isforget" :model="formData" ref="form" label-width="80px">
                <el-form-item label="用户名" style="margin-top: 50px;">
                    <el-input v-model="formData.username" style="width: 70%;"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="formData.password" style="width: 70%;"></el-input>
                </el-form-item>

            </el-form>
            <el-form v-if="isforget" :model="formData2" ref="form" label-width="80px">
                <el-form-item label="qq" style="margin-top: 50px;">
                    <el-input v-model="formData2.qq" style="width: 70%;"></el-input>
                </el-form-item>
                <el-form-item label="英文名">
                    <el-input v-model="formData2.name" style="width: 70%;"></el-input>
                </el-form-item>
                <el-form-item label="毕业高中">
                    <el-input v-model="formData2.school" style="width: 70%;"></el-input>
                </el-form-item>
            </el-form>
            <div style="display: flex;justify-content: center;align-items: center;">
                <div @click="forget" style="font-weight: bold;margin-right: 10px;">{{ isforget ? "想起密码！！！" : "忘记密码？" }}
                </div>
                <el-button type="primary" @click="onSubmit">登录</el-button>

            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue"
import { type Typeform } from "@/types/Admin"
import { AdminStore } from "@/store/AdminStore"
import { user_info } from "@/utils/Local"
import { ElMessage } from "element-plus";

const Store = AdminStore()
type Typeform2 = {
    qq: string,
    name: string,
    school: string
}
const isforget = ref(false)
const formData = reactive<Typeform>({
    username: "",
    password: ""
})
const formData2 = reactive<Typeform2>({
    qq: "",
    name: "",
    school: ""
})
const onSubmit = async () => {
    const result = user_info.Get_info()
    if (result._id) {
        ElMessage({
            type: "warning",
            message: "请先退出登录"
        })
    } else {
        Store.Login(formData)

    }

}

const forget = () => {
    isforget.value = !isforget.value
}
</script>

<style scoped lang="scss">
.login {
    width: 100%;
    display: flex;
    justify-content: center;
    height: 90vh;
    align-items: center;

    :deep(.el-form-item) {
        font-weight: bold;
    }

    ._login {
        width: 30%;
        height: 50vh;
        background-color: rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(10px);
        padding: 0.5vw;

        .header {
            text-align: center;
            font-size: 1.5vw;
            font-weight: bold;
        }
    }

    ._login:hover {
        box-shadow: 0 0 10px #000;
    }
}
</style>